<template lang="pug">
.scene(
  :class='{ "no-tab": !showSceneGroup }',
  :style='{ bottom: !getBottomMenuLenth && getThemeId == 2 && !showTouch ? "0" : "60px" }',
  v-show='showScene',
  @dblclick='handleToggleScene'
)
  .scene-wrap(v-if='isShow')
    .scroll-bar-wrap(style='width: 100%; overflow: hidden')
      .scene-list(ref='sceneListWrap')
        .scene-list-item.scene-list-itemg.debug(
          v-for='(item, index) in filterHideSceneList',
          :key='index',
          ref='sceneItem',
          :style='[getComsumerStyle, sceneIndex == index ? getBdColorStyle : ""]',
          :class='["item", { active: sceneIndex == index && !item.isLock }]',
          @click='handleSceneSwitch(item, index, true)'
        )
          el-tooltip(effect='dark', :content='item.title', placement='right')
            .text(:style='sceneIndex == index ? getColorStyle : ""') {{ getText(item.title) }}

    template(v-if='filterHideSceneList && filterHideSceneList.length')
      i.pre.iconfont.icon-next(@click='scroll(-1)')
      i.next.iconfont.icon-next(@click='scroll(1)')

  .group-wrap(v-if='getSceneGroup && showSceneGroup')
    template(v-if='getSceneGroup && getSceneGroup.length')
      i.preg.iconfont.icon-next(@click='scrollGroup(-1)')
      i.nextg.iconfont.icon-next(@click='scrollGroup(1)')
    .scene-group-g(ref='sceneGroupWrap')
      .scene-group-item(
        ref='sceneGroupItem',
        v-for='(group, index) in getSceneGroup',
        :key='index',
        :title='group.album',
        @click='handleGroupSwitch(group.groupid, index)'
      )
        span.label(
          :class='{ active: sceneGroupIndex == index }',
          :style='sceneGroupIndex == index ? getColorStyle : ""'
        ) {{ group.album }}
</template>

<script>
import themeMixin from '@/mixins/theme'
import sceneMixin from '@/mixins/scene'

export default {
  name: 'sceneGroup',
  mixins: [themeMixin, sceneMixin],
  data() {
    return {
      showTouch: $globalconfig.MODULES.TOUCH_BUTTON,
    }
  },
  computed: {
    filterHideSceneList() {
     return this.getSceneList && this.getSceneList.filter(item => !item.ishide)
    },
    isShow() {
      let isshow = false
      if (this.getSceneList && this.getSceneList.length > 1) {
        isshow = true
        this.getSceneList.forEach(item => {
          if(item.switchscene_id  && item.switchscene_id !== 0){
            isshow = false
          }
        })
      }
      return isshow
    }
  },
  mounted() {
    this.$refs.scrollSceneWrap = {refresh: a => 1}
  },
  methods: {
    getText(val) {
      let title = val.split('.')[0]
      let text = title.length > 4 ? title.slice(0, 3) + "...." : title
      return text
    },
    scroll(direction) {
      let scrollDom = this.$refs.sceneListWrap
      let st = scrollDom.scrollTop
      let step = direction * scrollDom.clientHeight

      let timer = setInterval(() => {
        if (Math.abs(step) < 10) {
          clearInterval(timer)
          timer = null
        } else {
          step = step / 2
        }
        scrollDom.scrollTop = scrollDom.scrollTop + step
      }, 50)
    },
    scrollGroup(direction) {
      if (!(this.$refs && this.$refs.sceneGroupWrap)) { return false }
      let scrollDom = this.$refs.sceneGroupWrap
      let st = scrollDom.scrollTop
      let step = direction * scrollDom.clientHeight

      let timer = setInterval(() => {
        if (Math.abs(step) < 10) {
          clearInterval(timer)
          timer = null
        } else {
          step = step / 2
        }
        scrollDom.scrollTop = scrollDom.scrollTop + step
      }, 50)
    },

  },
}
</script>

<style lang="stylus">
@import '~@/assets/styles/scene.styl'
@import '~@/assets/styles/color.styl'

.scene
  .scene-wrap
    .scene-list
      .scene-list-item.scene-list-itemg
        height 48px
        .text
          height 40px !important
    .pre, .next
      position absolute
      transform translate(-50%, -100%) rotateZ(-90deg)
      font-size 34px
      color #fff
      cursor pointer
      left 50%
      top 0%
      text-shadow 0 0 5px rgba(#000, 0.8)
    .next
      bottom 2px
      top auto
      transform translate(-50%, 100%) rotateZ(90deg)
  .group-wrap
    overflow initial !important
    .scene-group-g
      max-height 255px
      .scene-group-item
        span.label
          &.active
            color #58b7ff
    .preg, .nextg
      position absolute
      transform translate(-50%, -100%) rotateZ(-90deg)
      font-size 34px
      color #fff
      cursor pointer
      left 50%
      top 0%
      text-shadow 0 0 5px rgba(#000, 0.8)
    .nextg
      bottom 2px
      top auto
      transform translate(-50%, 100%) rotateZ(90deg)

@media only screen and (min-width 1200px)
  .scene
    .scene-wrap
      .pre, .next
        &:hover
          color $blue
    .group-wrap
      .preg, .nextg
        &:hover
          color $blue
</style>
